<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM对象与jquery对象的转换</title>
    <script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#d").click(function(){
                // console.log(document.getElementBy|Id("d").innerHTML);
                // jquery对象无法调用DOM中的方法
                // console.log($("#d").innerHTML);
                // 想要调用DOM方法,需要将jquery对象转换成DOM对象
                // 有两种方法:
                // 1.jquery对象[0]
                // 2.jquery对象.get(0)
                console.log($("#d")[0].innerHTML);
                console.log($("#d").get(0).innerHTML);
                // this关键字,表示当前触发事件的元素,是一个DOM对象
                console.log(this.innerHTML);
                // 在jquery中存在一个与innerHTML类似的方法
                // html():取值
                // html(value):赋值
                console.log($("#d").html());
                // DOM对象无法调用jquery函数
                // 想要调用jquery函数,需要将DOM对象转换成jquery对象
                // 转换方法:$(DOM对象)
                // console.log(this.html());
                console.log($(this).html());
            });
        })
    </script>
</head>
<body>
<div id="d">这是一个div</div>
</body>
</html>